<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../css/oksub.css" media="all"/>
</head>
<style>
    .carType li {
        margin-left: 10px;
    }

    .specific .layui-col-xs6 {
        border: 1px solid #dcaaaa;
        padding-left: 5px;
        height: 400px;
    }
</style>
<body class="console console1 ok-body-scroll">
<div class="ok-body home"  style="width: 80%;margin-left: 10%">
    <div class="layui-row layui-col-space15">
        <fieldset class="layui-elem-field">
            <legend></legend>
            <div class="layui-field-box">
                <div class="layui-carousel" id="mainCarousel" style="margin: 0 auto">
                    <div carousel-item style="text-align:center;height: 400px" id="carouselList">
                    </div>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="layui-row layui-col-space15" style=";margin: 0 auto">
        <div class="layui-col-md8" style="">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend id="showType">教练选取</legend>
            </fieldset>

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title carType">
                    <li class="layui-this">评分</li>
                    <li>教龄</li>
                    <li style="float:right;" ><div class="mainAClick" uri="coach/coachChoice">更多</div></li>
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <div class="layui-tab-item layui-show" >
                        <div class="layui-row specific" id="score" style="height: 430px">

                        </div>
                    </div>
                    <div class="layui-tab-item" >
                        <div class="layui-row specific" id="joiningTime" style="height: 430px">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md4" >
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                <legend>最新公告</legend>
            </fieldset>
            <div class="layui-card" style="margin-left: 5%;margin-right: 15%">
                <div class="layui-card-body" style="margin-top: 18px;height: 400px;padding-top: 30px" >
                    <h3 class="layui-timeline-title"><span id="noticeTitle">欢迎各位新学员</span></h3>
                    <p id="noticeContent">
                        XXXXX驾校欢迎各位新老学员
                    </p>
                    <br>
                    <span style="float: right;margin-right: 5%" id="noticeTime"></span>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<!--js逻辑-->
<script src="../js/jquery.min.js"></script>
<script src="../js/application.js"></script>
<script src="../lib/layui/layui.js"></script>
<script type="text/javascript">
    var showNotice;//轮播公告
    var coachShow;//教练展示
    var teachingStage=2;
    if(isNoEmpty(user['studyStatus'])){
        teachingStage=user['studyStatus'];
        //科目一科目四无需选择教练,展示科目二的教练信息
        if(teachingStage==1||teachingStage==4||teachingStage==0){
            teachingStage=2
            $("#showType").html("优秀教练")
            $(".mainAClick").hide();
        }
    }
    layui.use(["layer", "carousel", "rate",'element'], function () {
        var carousel = layui.carousel;
        var rate=layui.rate;
        var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块


        $(".mainAClick").on('click',function(){
            var uri=$(this).attr("uri");
            if(isNoEmpty(uri)){
                myAjaxGet("../data/pages.json",function(data){
                    var pages=uri.split("/")
                    for(page of pages){
                        data=data[page]?data[page]:""
                    }
                    window.parent.document.getElementById('iframeIndex').src=data['uri']||""
                })
            }
        })
        if(coachShow==undefined){
            coachShow=function(coachId,uri){
                if(isNoEmpty(uri)){
                    myAjaxGet("../data/pages.json",function(data){
                        var pages=uri.split("/")
                        for(page of pages){
                            data=data[page]?data[page]:""
                        }
                        window.parent.document.getElementById('iframeIndex').src=data['uri']+"?coachId="+coachId||""
                    })
                }
            }
        }

        var getSpecificHtml=function(d){
            var htmlTop='<div class="layui-col-xs6 layui-col-sm6 layui-col-md4 choice" uri="coach/coachShow" style="cursor:pointer" onclick="coachShow(\''+d['coachId']+'\',\'coach/coachShow\')">\n' +
                '                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">\n' +
                '                <legend>'+d['fullname']+'</legend><img src="'
            var photo=isNoEmpty(d['photo'])?MainIP + mainUri + d['photo']:'../images/userImgError.png'
            var htmlImg=photo+'" style="width: 121px;height: 75px;margin-left: 20%">\n' +
                '                </fieldset>\n' +
                '                <fieldset class="layui-elem-field">\n' +
                '                <legend>评分</legend>\n' +
                '                <div class="layui-field-box"><div class="lf_rate" lay-data="{value:'
            var htmlScore=d['score']/2+',readonly: true, text:true ,half:true}"></div>\n' +
                '                </div>\n' +
                '                </fieldset>\n' +
                '                <fieldset class="layui-elem-field">\n' +
                '                <legend>教龄</legend>\n' +
                '                <div class="layui-field-box">'
            var joiningTime=d['joiningTime']
            var date=dateGapByDay("",joiningTime);
            var htmlJoining=(date/365).toFixed(1)+'<span>年</span>\n' +
                '                </div>\n' +
                '                </fieldset>\n' +
                '                </div>'
            return htmlTop+htmlImg+htmlScore+htmlJoining
        }
        var setRate=function(){
            //多个评分
            layui.each( $('.lf_rate'), function (index, elem) {

                var configTemp = $(elem).attr('lay-data');
                try{
                    configTemp = eval('(' + configTemp + ')');

                }catch(e){
                    configTemp  = {};

                }

                rate.render($.extend(true,{
                    elem:elem
                    ,setText: function (value) { //自定义文本的回调
                        this.span.text((value*2).toFixed(1));
                    }
                }, configTemp));

            });
        }
        //按照评价排序的前三个教练
        var date={type:1,teachingStage:teachingStage,page:-1}
        if(user['studyType']!=-1){//当前状态不为未开始学习状态,展示的内容为排名
            date['isChoice']=1
        }
        myAjax(mainUri+"/coach/selectByEvaluate",date,function(d){
            if(d['code']==0){
                for(val of d['data']){
                    var html=getSpecificHtml(val)
                    $("#score").append(html)
                }
                setRate()
            }
        })
        date['type']=2
        //按照教龄排序的前三个教练
        myAjax(mainUri+"/coach/selectByEvaluate",date,function(d){
            if(d['code']==0){
                for(val of d['data']){
                    var html=getSpecificHtml(val)
                    $("#joiningTime").append(html)
                }
                setRate()
            }
        })

        //公告
        myAjax(mainUri+"/notice/selects",{noticeType:0,page:0,limit: 1},function (d) {
            if(d['code']==0){
                $("#noticeTitle").html(d['data'][0]['title'])
                $("#noticeContent").html(d['data'][0]['content'])
                $("#noticeTime").html(d['data'][0]['createDate'])
                $("#noticeContent img").css("max-width","300px")
            }
        })

        /**
         * 轮播
         */
        myAjax(mainUri + "/notice/selects", {limit: 4, isShow: 1, noticeType: 1}, function (d) {
            if (showNotice == null) {
                showNotice = function (noticeId) {
                    if (isNoEmpty(noticeData)) {
                        for (val of noticeData) {
                            if (val['noticeId'] == noticeId) {
                                var content = val['content'].replaceAll('src="http://localhost:8080', 'src="' + MainIP)
                                var width = document.body.clientWidth / 2
                                layer.open({
                                    type: 1,
                                    title: val['title'],
                                    area: [width.toString() + 'px', '500px'],
                                    content: content,
                                    shadeClose: true,
                                    maxmin: true
                                });
                            }
                        }
                    }
                }
            }
            var htmlTop = ' <div class="layui-bg-cyan">\n' +
                '<div onclick="showNotice(\'';
            var htmlContent = '\')"><img width="1525" height="400" src="'
            var htmlBottom = '"></div></div>'
            if (d["code"] == 0) {
                noticeData = d['data'];
                for (val of d['data']) {
                    var html = htmlTop + val['noticeId'] + htmlContent + MainIP + mainUri + val['noticeImg'] + htmlBottom;
                    $("#carouselList").append(html)
                }
            }
            //建造实例
            carousel.render({
                elem: '#mainCarousel'
                , width: '1525px' //设置容器宽度
                , height: '400px'
                , arrow: 'always' //始终显示箭头
                , autoplay: true
            });
        })
    });

</script>